<!--
 * @Author: Bennty
 * @Date: 2024-11-28 17:09:21
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-12-04 09:57:21
 * @Description: 请填写简介
-->
<template>
    <div class="p-2">
        <transition
            :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave"
        >
            <div class="search">
                <el-form ref="queryFormRef" :inline="true"></el-form>
            </div>
        </transition>
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="8" class="mb8">
                    <el-col class="header-button-container" :span="1.5">
                        <el-button type="success" plain icon="Plus" @click="handleClickAdd">新增</el-button>
                    </el-col>
                </el-row>
            </template>
            <el-table :data="configureList" :loading="loading">
                <el-table-column label="产品配置名称" prop="combinationName" align="center"></el-table-column>
                <el-table-column label="生产产品" align="center">
                    <template #default="scope">
                        <span class="not-alert" v-if="scope.row.procedureProduct == 'customization_indent_cap'">生日帽</span>
                        <span class="not-alert" v-else-if="scope.row.procedureProduct == 'customization_indent_tableware'">蛋糕餐具</span>
                    </template>
                </el-table-column>
                <el-table-column label="产品款式" align="center">
                    <template #default="scope">
                        <span v-if="scope.row.procedureProduct == 'customization_indent_cap'">{{ customization_indent_cap.filter((item: any)=>item.value == scope.row.productStyle)[0].label }}</span>
                        <span v-if="scope.row.procedureProduct == 'customization_indent_tableware'">{{ customization_indent_tableware.filter((item: any)=>item.value == scope.row.productStyle)[0].label }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="箱规" align="center">
                    <template #default="scope">
                        <el-tooltip content="编辑箱规" placement="top">
                            <el-button link :style="{fontSize:'15px'}" type="primary" @click="handleClickEditBoxGauge(scope.row)">编辑箱规</el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="更新日期" prop="updateTime" align="center"></el-table-column>
                <el-table-column label="更新人" prop="updateByName" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-tooltip content="查看" placement="top">
                            <el-button link :style="{fontSize:'15px'}" icon="View" type="success" @click="handleClickCheckConfigure(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="编辑" placement="top">
                            <el-button link :style="{fontSize:'15px'}" icon="Edit" type="primary" @click="handleClickEdit(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button link :style="{fontSize:'15px'}" icon="Delete" type="danger" @click="handleDeleteConfigure(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                @pagination="getConfigureList" />
        </el-card>
        <addConfigure :visible="addConfigureVisible" :formModel="form" :caps="customization_indent_cap" :tableWare="customization_indent_tableware" :types="typeList" @close="handleCloseAdd" @submit="handleSubmit" />
        <editConfigure :visible="editConfigureVisible" :formModel="configureDetail" :caps="customization_indent_cap" :tableWare="customization_indent_tableware" :types="typeList" @close="handleCloseEdit" @submit="handleSubmit" />
        <editBoxGauge :visible="editBoxGaugeVisible" :data="configureDetail" :types="typeList" @close="handleCloseEditBoxGauge" @submit="handleSubmit"/>
        <checkConfigure :visible="checkConfigureVisible" :formModel="configureDetail" :caps="customization_indent_cap" :tableWare="customization_indent_tableware" :types="typeList" @close="handleCloseCheck" />
    </div>
</template>

<script setup lang="ts">
import { type FormInstance } from 'element-plus';
import { QueryConfigureType, Form, ConfigureVO } from '@/api/sj/productManagement/productConfigure/types';
import { getTotalCategoryByMaterialTypeApi } from '@/api/sj/warehouse/typeManagement';
import { getConfigureListApi, getConfigureDetailApi, deleteConfigureApi } from '@/api/sj/productManagement/productConfigure';

import addConfigure from './components/addConfigure.vue';
import editConfigure from './components/editConfigure.vue';
import editBoxGauge from './components/editBoxGauge.vue';
import checkConfigure from './components/checkConfigure.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { customization_indent_cap, customization_indent_tableware } = toRefs<any>(proxy?.useDict('customization_indent_cap','customization_indent_tableware'));
const queryFormRef = ref<FormInstance>();

const data = reactive<pageDataExcludeRuses<Form, QueryConfigureType>>({
    form:{
        id: undefined,
        combinationName: undefined,
        productType: undefined,
        procedureProduct: undefined,
        productStyle: undefined,
        imageUrl: undefined,
        dataList: []
    },
    queryParams:{
        pageNum: 1,
        pageSize: 30
    }
});

const { form, queryParams } = toRefs(data);
const materialType = '2';
const typeList = ref<any[]>([]);
const loading = ref(false);
const configureList = ref<ConfigureVO[]>([]);
const totalData = ref(0);

const addConfigureVisible = ref(false);
const configureDetail = ref<any>({});
const checkConfigureVisible = ref(false);
const editConfigureVisible = ref(false);
const editBoxGaugeVisible = ref(false);

/** 根据材料类型获取大类 */
const getTotalTypes = async () => {
    const { data } = await getTotalCategoryByMaterialTypeApi({materialType: materialType});
    typeList.value = data;
};

const getConfigureList = async () => {
    loading.value = true;
    const {code, rows, total} = await getConfigureListApi(queryParams.value);
    if(code == 200){
        configureList.value = rows;
        totalData.value = total;
    };
};

const handleSubmit = (result: boolean) => {
    if(result){
        proxy?.$modal.msgSuccess('成功');
        getConfigureList();
    };
};

const handleClickAdd = () => {
    addConfigureVisible.value = true;
};

const handleCloseAdd = () => {
    addConfigureVisible.value = false;
};

const handleClickEdit = async (row: ConfigureVO) => {
    const {code,data} = await getConfigureDetailApi(row.id);
    if(code == 200){
        configureDetail.value = data;
        editConfigureVisible.value = true;
    };
};

const handleCloseEdit = () => {
    editConfigureVisible.value = false;
};

const handleDeleteConfigure = async (row: ConfigureVO) => {
    await proxy?.$modal.confirm("此条产品配置信息将彻底删除，确认么？");
    const {code} = await deleteConfigureApi(row.id);
    if(code == 200){
        handleSubmit(true);
    };
};

const handleClickEditBoxGauge = async (row: ConfigureVO) => {
    const {code,data} = await getConfigureDetailApi(row.id);
    if(code == 200){
        configureDetail.value = data;
        editBoxGaugeVisible.value = true;
    };
};

const handleCloseEditBoxGauge = () => {
    editBoxGaugeVisible.value = false;
};

const handleClickCheckConfigure = async (row: ConfigureVO) => {
    const {code,data} = await getConfigureDetailApi(row.id);
    if(code == 200){
        configureDetail.value = data;
        checkConfigureVisible.value = true;
    };
};

const handleCloseCheck = () => {
    checkConfigureVisible.value = false;
};

onMounted(()=>{
    getTotalTypes();
    getConfigureList();
});

</script>

<style scoped>

</style>